<template>
    <div class="list" ref="wrapper">
        <div>
            <div class="list-one" v-for="(item, index) of list" :key="item.id">
                <div class="duty-time">
                    <div class="duty-time-box">
                        <p class="duty-time-clock">{{ item.clock }}</p>
                        <p class="duty-time-half-day">{{ item.halfDay }}</p>
                    </div>
                    <cube-switch @input="switchMessageWarn(index)" v-model="item.isMessageWarn" class="switch"></cube-switch>
                </div>
                <div class="duty-content">
                    <p class="duty-content-p">{{ item.content }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Style, Switch } from 'cube-ui'
import Bscroll from 'better-scroll'
export default {
    name: "List",
    data () {
        return {
            isClose: false,
            list: []
        }
    },
    methods: {
        updateList (datas) {
            this.list = datas;
        },
        Toast (txt, type, time) {
            var toast = this.$createToast({
                txt: txt,
                type: type,
                time: time
            });
            toast.show();
        },
        switchMessageWarn (idx) {
            var list = this.list;
            if (list[idx].isMessageWarn) {
                this.Toast('已开启短信提醒', 'txt', 1200);
            } else {
                this.Toast('已关闭短信提醒', 'txt', 1200);
            }
            
        }
    },
    mounted () {
        this.scroll = new Bscroll(this.$refs.wrapper);
      
    }
    
}
</script>

<style lang="stylus" scoped>
    .list
        width 94%
        overflow hidden
        height 12rem
        .list-one
            width 100%
            height 3rem
            border-bottom .02rem solid #333
            .duty-time
                width 100%
                height 1.8rem
                display flex
                justify-content space-between
                align-items flex-end
                .duty-time-box
                    display flex
                    align-items flex-end
                    .duty-time-clock
                        color #333
                        font-size 1.2rem
                    .duty-time-half-day
                        color #333
                        font-size .5rem
                        margin-bottom .1rem
                        margin-left .1rem
            .switch
                margin-right .2rem
            .duty-content
                width 100%
                height 1.2rem
                display flex
                justify-content flex-start
                align-items center
                .duty-content-p
                    width 100%
                    text-align left 
                    overflow hidden
                    text-overflow ellipsis
                    white-space nowrap
                    color #333
                    font-size .42rem
                    
                    
</style>   


